<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Konva</title>
		<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
		<!-- Knova官网 https://konvajs.github.io/ -->
    <script>
      // 创建舞台
      var stage = new Konva.Stage({
      	container: 'container',
      	width: window.innerWidth,
      	height: window.innerHeight
      })
      // 创建层
      var layer = new Konva.Layer()
      stage.add(layer)
      // 中心点坐标
      var cenX = stage.width() / 2
      var cenY = stage.height() / 2
			
			// 柱状图的数据
			var data = [
				{ name:'Web', value: '.8', color: 'green'},
				{ name:'PHP', value: '.3', color: 'blue'},
				{ name:'Java', value: '.7', color: 'red'},
				{ name:'UI', value: '.9', color: 'orange'}, 
				{ name:'IOS', value: '.4', color: 'purple'},
				{ name:'Android', value:'.9', color:'pink'}
			]
			
			var x0 = 1/8 * stage.width() //原点的坐标
			var y0 = 3/4 * stage.height()
			var width = 3/4 * stage.width() //柱状图的最大宽度
			var height = 1/2 * stage.height() //柱状图的最大高度
			
			// 绘制底线
			var bsLine = new Konva.Line({
				points: [x0, y0, x0+width, y0],
				strokeWidth: 1,
				stroke: 'lightgreen'
			})
			layer.add(bsLine);
			
			// 绘制柱状图
			var rectWidth = width / data.length;
			data.forEach(function(item,index){
				var rect = new Konva.Rect({
					x: x0 + (1/4 + index) * rectWidth,
					y: y0 - item.value * height,
					width: 1/2 * rectWidth,
					height: item.value * height,
					fill: item.color,
					opacity: .8,
					cornerRadius: 10
				})
				layer.add(rect);
				
				// 将百分比的文字放到柱状图顶部
				var text_top = new Konva.Text({
					x: x0 + index * rectWidth,
					y: y0 - item.value * height - 15,
					width: rectWidth,
					fill: item.color,
					text: item.value * 100 + '%',
					align: 'center',
					fontSize: 16,
					name: 'textPercent'
				})
				layer.add(text_top)
				
				// 将内容的文字放到柱状图底部
				var group = new Konva.Group({
					x: x0 + (1/4 + index) * rectWidth,
					y: y0,
				})
				var text_bottom = new Konva.Text({
					x: 0,
					y: 0,
					fill: item.color,
					text: item.name,
					fontSize: 16,
					rotation: 30
				})
				group.add(text_bottom)
				layer.add(group)
			})
			
			layer.draw();
			
			// 添加动画效果
			stage.on('contentClick',function(){
				layer.find('Rect').each(function(item,index){
					item.y(y0);
					item.height(0);
					item.to({
						duration: 1,
						y: y0 - data[index].value * height,
						height: data[index].value * height
					})
				})
				layer.find('.textPercent').each(function(item,index){
					item.y(y0 - 14);
					item.to({
						duration: 1,
						y: y0 - data[index].value * height - 14
					})
				})
			})
    </script>
  </body>
</html>